<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>1123vue</title>
<!--
	1.vue的核心就是数据双向绑定，即一个数据的变化回对视图和数据本身发生变化
	2.原理：
	-在vue2.x即一千都是用object.defineproperty方法，它的语法是
	--object.defineproperty(obj,key,options)
	-obj是一个对象，key是对象的一个属性
	-options，属性的描述描述符
	-返回值：返回此对象
	
	vue：
	渐进式JavaScript框架
	只关注UI，属于mvvm框架
	mvc：模型，视图，控制器
	好处：
	单页面应用，无数新跳转路由
	模块化开发，便于维护和迭代
	强大的生态圈，开发快速
	
	
	
-->	
	</head>
	<body>
	<!--根节点-->
	<div id="app">
		<!--插值写法-->
		 {{ txt }} 
		
		 <h1>
			{{ txt }} 
		</h1>
		<!--数据双向绑定-->
		<input type="text" v-model="txt"/> 
	</div>
	<!--js是同步加载的，会阻止页面渲染-->
	<script src="js/vue.js"></script>
	<!--执行程序-->
	<script>
		//mvvm模式数据双向绑定---双向流
		//初始化程序
		new Vue ({
			//选择挂载的容器
			el: '#app',	//document.getElement
			//初始化一个数据：被数据双向监听的变量
			//初始一个数据
			data: {
				txt: '2020年11月23日'
			}
		})
		
		
		
		
		
		
		
		
		
		
		
		
		
	</script>
	</body>
</html>
